<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Patients</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
        }
        .select-form {
            background-color: #fff;
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            text-align: center;
        }
        .select-form h1 {
            margin-bottom: 1rem;
            color: #007BFF;
        }
        .select-form label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: #333;
        }
        .select-form input,
        .select-form select {
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .select-form select {
            appearance: none;
            background-color: white;
            background-image: linear-gradient(45deg, transparent 50%, #007BFF 50%),
                              linear-gradient(135deg, #007BFF 50%, transparent 50%);
            background-position: calc(100% - 20px) calc(1em + 2px),
                                 calc(100% - 15px) calc(1em + 2px);
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
            padding-right: 25px;
            cursor: pointer;
            text-align-last: center;

        }
        .select-form input[type="submit"] {
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .select-form input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .select-form p {
            margin-top: 1rem;
        }
        .back-to-main {
            display: inline-block;
            margin-top: 1rem;
            color: #007BFF;
            text-decoration: none;
            transition: color 0.3s;
        }
        .back-to-main:hover {
            color: #0056b3;
        }
        body.dark-mode {
            background-color: #121212;
            color: #ffffff;
        }

        .dark-mode .select-form {
            background-color: #1e1e1e;
            color: #c0c0c0;
        }

        .dark-mode .select-form h1,
        .dark-mode .select-form label,
        .dark-mode .select-form p {
            color: #c0c0c0;
        }

        .dark-mode .back-to-main {
            color: #c0c0c0;
        }

        .dark-mode .back-to-main:hover {
            color: #a8a8a8;
        }

    </style>
</head>
<body>
    <div class="select-form">
        <h1>Check Patients</h1>
        <p>Welcome! Dr.{{ doctor_user_name }}</p>
        <form action="/check_patients" method="post">
            <label for="patient_id">Patient ID:</label>
            <input type="text" id="patient_id" name="patient_id" required><br>
            <label for="table_name">Table Name:</label>
            <select id="table_name" name="table_name" required>
                <option value="pharyngitis">Pharyngitis</option>
                <option value="otoscope">Otoscope</option>
            </select><br>
            <input type="submit" value="Check">
        </form>
        <p><a class="back-to-main" href="{{ url_for('main_page') }}">Back to Main Page</a></p>
        <button id="toggleDarkMode">Toggle Dark Mode</button>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const toggleButton = document.getElementById('toggleDarkMode');

            // Retrieve dark mode setting from localStorage
            if (localStorage.getItem('dark-mode') === 'true') {
                document.body.classList.add("dark-mode");
            }


            // Add click event listener to toggle dark mode
            toggleButton.addEventListener('click', () => {
                document.body.classList.toggle("dark-mode");
                localStorage.setItem('dark-mode', document.body.classList.contains("dark-mode"));
            });
        });
    </script>


</body>
</html>
